<template>
  <div class="course">
    <div class="course-menu">
      <div class="menu-item">
        <div class="my-course">我的课程</div>
        <div class="goto-center">课程中心</div>
      </div>
      <div class="menu-item">
        <div class="course-tile">初学入门集训营</div>
        <div class="course-status">
          <div class="begin">正在进行</div>
          <div class="hour">40课时</div> 
        </div>
      </div>
    </div>
    <div class="plan-item">
      <div class="plan-wrap">
        <div class="plan-content">
          <div class="day">day 01</div>
          <div class="title">熟悉指法练习熟悉指法练习熟悉指法练习熟悉指法练习熟悉指法练习熟悉指法练习熟悉指法练习熟悉指法练习熟悉指法练习</div>
          <div class="rate">
            <div class="star"></div>
            <div class="score">---</div>
          </div>
        </div>
        <div class="plan-banner">
          <img src="https://oimagec7.ydstatic.com/image?id=-1925268780747139314&product=adpublish&w=1280&h=720&sc=0&rm=2&gsb=0&gsbd=60" alt="">
        </div>
      </div>
    </div>
    <div class="will-banner">

    </div>
  </div>
</template>

<script>
import {} from '@/config/api'
import {} from '@/config/mUtils'

export default {
  components:{
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
  },
  // 下拉刷新
  onPullDownRefresh () {
  },
  // 上拉加载
  onReachBottom () {
  },
  // 切换界面
  onHide () {
  },
  // 滚动界面
  onPageScroll (res) {
  },
  // 页面加载
  onLoad () {
  },
  // 页面显示
  onShow () {
  }
}
</script>
<style>
page {
  height: 100%;
  background-color: #fafafa;
}
</style>
<style lang="less" scoped>
.course {
  padding: 19rpx 32rpx 0;
  .course-menu {
    padding: 0 33rpx;
    height: 195rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
    .menu-item {
      position: relative;
      &:nth-child(1) {
        padding: 25rpx 0;
        height: 48rpx;
        border-bottom: 1px solid #eaeaea;
        .my-course {
          font-family: PingFangSC-Medium;
          font-size: 36rpx;
          color: #333333;
          letter-spacing: 0.73rpx;
          line-height: 48rpx;
        }
        .goto-center {
          position: absolute;
          vertical-align: middle;
          top: 25rpx;
          right: 0;
          width: 180rpx;
          height: 48rpx;
          line-height: 48rpx;
          background-image: linear-gradient(-90deg, #FE7A72 0%, #FFB497 100%);
          border-radius: 24rpx;
          font-family: PingFangSC-Regular;
          font-size: 30rpx;
          color: #FFFFFF;
          letter-spacing: 0.61px;
          text-align: center;
        }
      }
      &:nth-child(2) { 
        .course-tile {
          height: 95rpx;
          line-height: 95rpx;
          font-family: PingFangSC-Regular;
          font-size: 32rpx;
          color: #333333;
          letter-spacing: 0.65rpx;
        }
        .course-status {
          position: absolute;
          top: 13rpx;
          right: 0;
          width: 100rpx;
          > div {
            font-family: PingFangSC-Regular;
            text-align: right;
          }
          .begin {
            margin-bottom: 2rpx;
            font-size: 24rpx;
            color: #159E5D;
          }
          .hour {
            font-size: 24rpx;
            color: #666666;
            letter-spacing: 0;
          }
        }
      }
    }
  }
  .plan-item {
    height: 270rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    margin-top: 30rpx;
    .plan-wrap {
      padding: 35rpx 30rpx 35rpx 34rpx;
      .plan-content {
        height: 100%;
        padding-right: 363rpx;
        .day {
          font-family: PingFangSC-Medium;
          font-size: 36rpx;
          color: #333333;
          letter-spacing: 0.73rpx;
        }
        .title {
          font-family: PingFangSC-Regular;
          font-size: 32rpx;
          color: #666666;
          letter-spacing: 0.65px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .rate {
          position: absolute;
          bottom: 35rpx;
          .star {

          }
          .score {
            padding-left: 18rpx;
            font-family: PingFangSC-Medium;
            font-size: 30rpx;
            color: #151515;
            letter-spacing: 1rpx;
            line-height: 30rpx;
            height: 30rpx;
            position: relative;
            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 2rpx;
              height: 30rpx;
              background-color: #151515;
            }
          }
        }
      }
      .plan-banner {
        position: absolute;
        top: 35rpx;
        right: 30rpx;
        width: 280rpx;
        height: 200rpx;
        img {
          width: 280rpx;
          height: 200rpx;
          border-radius: 10rpx;
          overflow: hidden;
        }
      }
    }
  }
  .will-banner {
    margin-top: 30rpx;
    height: 300rpx;
    background-color: #fff;
  }
}
</style>
